<script>
import {defineComponent} from 'vue'
import axios from "axios";
import router from "@/router";

export default defineComponent({
  name : "register",
  methods : {
    register_axios(userid,password){
      const user = {
        userid : userid,
        password : password
      }
      return axios({
        url:'http://localhost:8080/users',
        method:'POST',
        withCredentials:true,
        data:user
      })
    },
    register(e){
      e.preventDefault()
      const promise = this.register_axios(this.userid,this.password)
      promise.then(
          response=>{
            if(response.data.status === 0){
              alert('注册成功')
              // 看看要不要改成replace
              router.push('/login')
            } else {
              router.replace({
                path : '/register',
                query : {
                  error : '用户名已被占用'
                }
              })
              location.reload()
            }
          }
      ).catch(error=>{
        console.log(error)
      })
    }
  },
  data(){
    return{
      userid:"",
      password:"",
    }
  }
})
</script>

<template>
  <div class="wrapper">
    <div class="container main">
      <div class="row">
        <div class="col-md-6 side-image">
          <img src="@/assets/login/white.png" alt="" >
          <div class="text">
            <p>Join the community of PetStore <i>- Nagisa</i></p>
          </div>
        </div>
        <div class="col-md-6 right">
          <div class="input-box">
            <header>Create Account</header>
            <div class="input-field">
              <input type="text" class="input" id="username" v-model="userid" required autocomplete="off">
              <label for="username">Username</label>
            </div>
            <div class="input-field">
              <input type="password" class="input" id="password" v-model="password" required>
              <label for="password">Password</label>
            </div>
            <div class="input-field">
              <input type="submit" class="submit" value="Sign Up" @click="register">
            </div>
            <div class="signIn">
              <span>Already have an account?<router-link  to="/login">Log in</router-link></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
*{
  font-family: 'Poppins', sans-serif;
}
.wrapper{
  background: #ececec;
  padding: 0 20px 0 20px;
}
.main{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.row{
  width: 900px;
  height: 550px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.2);
}
.side-image{
  background-image: url("@/assets/login/bg1.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 10px 0 0 10px;
}
img{
  width: 35px;
  position: absolute;
  top: 30px;
  left: 30px;
}
.text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.text p{
  color: #fff;
  font-size: 18px;
}
i{
  font-weight: 400;
  font-size: 15px;
}
.right{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.input-box{
  width: 330px;
  box-sizing: border-box;
}
.input-box header{
  font-weight: 700;
  text-align: center;
  margin-bottom: 45px;
}
.input-field{
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 10px 0 10px;
}
.input{
  height: 45px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  outline: none;
  margin-bottom: 20px;
  color: #40414a;
}
.input-box .input-field label{
  position: absolute;
  top: 10px;
  left: 10px;
  pointer-events: none;
  transition: .5s;
}
.input-field .input:focus ~ label{
  top: -10px;
  font-size: 13px;
}
.input-field .input:valid ~ label{
  top: -10px;
  font-size: 13px;
  color: #5d5076;
}
.input-field .input:focus, .input-field .input:valid{
  border-bottom: 1px solid #743ae1;
}
.submit{
  border: none;
  outline: none;
  height: 45px;
  background: #ececec;
  border-radius: 5px;
  transition: .4s;
}
.submit:hover{
  background: rgba(37, 95, 156,0.9);
  color: #fff;
}
.signIn{
  text-align: center;
  font-size: small;
  margin-top: 25px;
}
span a{
  text-decoration: none;
  font-weight: 700;
  color: #000;
  transition: .5s;
}
span a:hover{
  text-decoration: underline;
  color: #000;
}
@media only screen and (max-width: 768px){
  .side-image{
    border-radius: 10px 10px 0 0;
  }
  img{
    width: 35px;
    position: absolute;
    top: 20px;
    left: 47%;
  }
  .text{
    position: absolute;
    top: 70%;
    text-align: center;
  }
  .text p,i{
    font-size: 17px;
  }
  .row{
    max-width: 420px;
    width: 100%;
  }
}
</style>